<template>
  <div class="global-sider">
    
    <!-- 🎯 垂直混合布局：双侧边栏结构 -->
    <template v-if="actualLayoutMode === 'vertical-mix'">
      <!-- 主侧边栏（80px，图标菜单） -->
      <div class="main-sider">
        <GlobalLogo 
          v-if="showLogo" 
          :show-title="false"
          :style="logoStyles && { height: logoStyles.height, borderBottom: '1px solid var(--el-border-color-lighter)' }"
          class="sider-logo"
        />
        <div 
          id="sider-menu-container-primary"
          class="main-sider-menu"
          style="flex: 1; overflow: hidden;"
        >
          <!-- 垂直混合的主菜单（图标）传送到这里 -->
        </div>
      </div>
      
      <!-- 子侧边栏（200px，详细菜单） - 🎯 动态显示 -->
      <div 
        id="sub-sider-menu-container"
        class="sub-sider vertical-mix-sub"
        :style="{
          width: subSiderVisible ? '200px' : '0',
          height: '100%',
          padding: '0',
          overflow: 'hidden',
          transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          flexShrink: '0',
          opacity: subSiderVisible ? 1 : 0
        }"
      >
        <!-- 垂直混合的子菜单传送到这里 -->
      </div>
    </template>
    
    <!-- 🎯 水平混合布局：只有子菜单侧边栏 -->
    <template v-else-if="actualLayoutMode === 'horizontal-mix'">
      <div 
        id="sider-menu-container-sub"
        class="sub-sider horizontal-mix-sub"
        style="width: 100%; height: 100%; overflow-y: auto;"
      >
        <!-- 水平混合的子菜单传送到这里 -->
      </div>
    </template>
    
    <!-- 🎯 普通垂直布局：单一侧边栏 -->
    <template v-else>
      <GlobalLogo 
        v-if="showLogo" 
        :show-title="!collapsed"
        :style="logoStyles || {}"
        class="sider-logo"
      />
      
      <div 
        id="sider-menu-container-primary"
        :class="menuWrapperClass"
        class="sider-menu-wrapper"
      >
        <!-- 垂直布局的菜单传送到这里 -->
      </div>
    </template>
    
  </div>
</template>
  
<!-- global-sider/index.vue -->
<script setup>
import { computed, watch } from 'vue'
import { useLayoutManage } from '@/layouts/layoutManage.js'
import { useDevice } from '@/composables/useDevice.js'
import { useTheme } from '@/composables/useTheme.js'
import GlobalLogo from '../global-logo/index.vue'
import { SIDER_MENU_CONTAINER_ID, SUB_SIDER_MENU_CONTAINER_ID } from '@/layouts/constants.js'

// 🎯 Props 接收
const props = defineProps({
  visible: Boolean,
  showLogo: Boolean,
  width: Number,
  collapsedWidth: Number,
  collapsed: Boolean,
  menuType: String
})

// 🎯 Composables
const { isMobile } = useDevice()
const { isDark } = useTheme()

// ✅ 修复：正确解构 useLayoutManage 的返回值
const {
  layoutSetting,
  actualLayoutMode,           // ✅ 模板中需要这个
  currentLayoutConfig,        // ✅ 模板中需要这个
  siderProps,                 // ✅ 模板中需要这个
  mobileDrawerVisible,
  childLevelMenus,            // 🎯 用于判断子菜单是否存在
  activeFirstLevelMenuKey     // 🎯 诊断：直接 watch 这个 ref
} = useLayoutManage()

// console.log('🚀 [GlobalSider] 组件初始化，childLevelMenus 引用:', childLevelMenus)

// 🎯 子侧边栏是否可见（根据是否有子菜单）
const subSiderVisible = computed(() => {
  const visible = childLevelMenus.value && childLevelMenus.value.length > 0
  console.log('🔍 [GlobalSider] 子侧边栏可见性:', 
    'visible:', visible,
    'childCount:', childLevelMenus.value?.length || 0,
    'layoutMode:', actualLayoutMode.value,
    'childMenus:', childLevelMenus.value
  )
  return visible
})

// ✅ 菜单容器样式类
const menuWrapperClass = computed(() => {
  return props.showLogo ? 'menu-wrapper-with-logo' : 'menu-wrapper-full'
})

// ✅ Logo 样式（添加安全检查）
const logoStyles = computed(() => {
  if (!currentLayoutConfig.value || !currentLayoutConfig.value.header) {
    return { height: '56px', borderBottom: '1px solid var(--el-border-color-lighter)' }
  }
  return {
    height: `${currentLayoutConfig.value.header.height}px`,
    borderBottom: `1px solid var(--el-border-color-lighter)`
  }
})

// 🎯 监听布局模式变化并打印调试信息
watch(actualLayoutMode, (newMode) => {
  console.log('🔄 [GlobalSider] 布局模式切换:', {
    newMode,
    subSiderVisible: subSiderVisible.value,
    childMenusCount: childLevelMenus.value?.length || 0,
    currentConfig: currentLayoutConfig.value
  })
}, { immediate: true })

// 🎯 诊断：watch activeFirstLevelMenuKey
watch(activeFirstLevelMenuKey, (newVal, oldVal) => {
  console.log('🔥 [GlobalSider] activeFirstLevelMenuKey 变化:',
    'old:', oldVal,
    'new:', newVal,
    'childLevelMenus.value:', childLevelMenus.value
  )
}, { immediate: true })

watch(childLevelMenus, (newVal, oldVal) => {
  console.log('🔄 [GlobalSider] 子菜单变化:',
    'oldCount:', oldVal?.length || 0,
    'newCount:', newVal?.length || 0,
    'subSiderVisible:', subSiderVisible.value,
    'layoutMode:', actualLayoutMode.value,
    'newMenus:', newVal
  )
}, { deep: true, immediate: true })

// ✅ 侧边栏样式类
const siderClasses = computed(() => [
  'sider-container',
  `sider-${actualLayoutMode.value}`,
  {
    'sider-collapsed': props.collapsed && !isMobile.value,
    'sider-mobile': isMobile.value,
    'sider-mobile-visible': isMobile.value && mobileDrawerVisible.value,
    'sider-dark': isDark.value
  }
])

// ✅ 侧边栏样式
const siderStyles = computed(() => {
  const styles = {}
  
  if (isMobile.value) {
    styles.position = 'fixed'
    styles.left = mobileDrawerVisible.value ? '0' : '-100%'
    styles.width = '280px'
    styles.height = '100vh'
    styles.zIndex = 2000
    styles.transform = `translateX(${mobileDrawerVisible.value ? '0' : '-100%'})`
  } else {
    styles.width = props.collapsed 
      ? `${props.collapsedWidth}px` 
      : `${props.width}px`
  }
  
  return styles
})

// ✅ 垂直混合布局的子侧边栏样式（暂时不需要，使用内联样式）
const subSiderStyles = computed(() => {
  return {}
})

// ✅ 水平混合布局的子菜单样式
const horizontalMixSubStyles = computed(() => {
  return {
    width: '100%',
    height: '100%',
    background: 'var(--el-bg-color-page)'
  }
})
</script>
  
  <style lang="scss" scoped>
  .global-sider {
    display: flex;
    flex-direction: column;
    background: #fafafa;  // 🎨 简约浅灰色背景
    border-right: 1px solid #e8e8e8;  // 更柔和的边框
    transition: all 0.3s var(--el-transition-function-ease-in-out-bezier);
    overflow: hidden;
    
    // 🎯 Logo 区域
    .sider-logo {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      
      // 折叠状态下居中显示
      &.logo-collapsed {
        justify-content: center;
      }
    }
    
    // 🎯 菜单容器
    .sider-menu-wrapper {
      flex: 1;
      overflow: hidden;
      
      &.menu-wrapper-with-logo {
        // 有Logo时的菜单容器样式
        height: calc(100% - 56px);
      }
      
      &.menu-wrapper-full {
        // 无Logo时的菜单容器样式
        height: 100%;
      }
    }
    
    // 🎯 子侧边栏（样式由内联动态控制）
    .sub-sider {
      // 不设置固定样式，由内联样式动态控制
    }
    
    // 🎯 折叠状态
    &.sider-collapsed {
      .sider-logo {
        justify-content: center;
      }
    }
    
    // 🎯 移动端样式
    &.sider-mobile {
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
      
      &.sider-mobile-visible {
        transform: translateX(0);
      }
    }
    
    // 🎯 垂直混合布局的特殊样式
    &.sider-vertical-mix {
      flex-direction: row; // 水平排列主侧边栏和子侧边栏
      
      .main-sider {
        width: 80px;
        display: flex;
        flex-direction: column;
        background: var(--el-bg-color);
        border-right: 1px solid var(--el-border-color-light);
        
        .sider-logo {
          padding: 16px 8px;
          justify-content: center;
        }
        
      .main-sider-menu {
        // 主菜单容器样式
        overflow: hidden;
      }
      }
      
      .vertical-mix-sub {
        // 子侧边栏样式（宽度由内联样式动态控制）
        position: relative !important; // 不使用固定定位
        left: 0 !important;
        top: 0 !important;
        // width 由内联样式动态控制，不设置 !important
        height: 100% !important;
      }
    }
    
    &.sider-horizontal-mix {
      // 水平混合布局：侧边栏从头部下方开始
      margin-top: 0;
    }
    
    // 🎯 深色模式
    &.sider-dark {
      background: var(--el-bg-color-darker);
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 🎯 移动端遮罩（当侧边栏打开时）
  .global-sider.sider-mobile::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }

  // ✅ 新增：水平混合布局的子菜单样式
  .horizontal-mix-sub {
    width: 100% !important;
    padding: 0;
    overflow-y: auto;
    background: #fafafa;  // 🎨 简约浅灰色背景
  }
  
  // ✅ 垂直混合布局的子菜单样式
  .vertical-mix-sub {
    background: #fafafa;  // 🎨 简约浅灰色背景
    border-right: 1px solid #e8e8e8;  // 更柔和的边框
    box-shadow: none;  // 移除阴影，更简约
  }
  
  .global-sider.sider-mobile.sider-mobile-visible::before {
    opacity: 1;
  }
  </style>